<template>
  <view style="position: relative;" class="add-address-view" v-if="datas">
    <view class="is-Success">
      <image :src="$store.state.imgBaseUrl + '/store-1.png'"></image>
      <text>认证成功</text>
    </view>
    <view class="h20"></view>
    <form>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">门店名称</text>
        <input type="text" class="form-item-input" disabled v-model="datas.name" placeholder="请填写您的门店名称" placeholder-class="input-placeholder"/>
        <view class="no-arrow"></view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">门店电话</text>
        <input type="text" class="form-item-input" disabled v-model="datas.mobile" placeholder="请填写手机号/座位号" placeholder-class="input-placeholder"/>
        <view class="no-arrow"></view>
      </view>
      <view class="h20"></view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">所在城市</text>
        <view class="pick-value pick-left">{{datas.districtName}}</view>
      </view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">门店地址</text>
        <input type="text" class="form-item-input" v-model="datas.address" disabled placeholder="请填写手机号/座位号" placeholder-class="input-placeholder"/>
        <view class="no-arrow"></view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">手动定位</text>
        <view class="form-item-pick" >
          <view class="pick-value pick-left">
            <text>{{datas.districtName + datas.address}}</text>
          </view>
        </view>
      </view>
      <view class="h20"></view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">经营品类</text>
        <view class="pick-value pick-left">
          <text>{{datas.storeTypeName}}</text>
        </view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">营业时间</text>
        <view class="pick-value pick-left">
          <text v-if="datas.beginTime">{{datas.beginTime.substr(0,5)}}-{{datas.endTime.substr(0,5)}}</text>
        </view>
      </view>
      <view class="btn_div">
        <view class="h20"></view>
        <view class="update-box">
          <view class="tit">
            <view class="left">门店LOGO <text>（用于爆品的店铺对外展示）</text></view>
          </view>
          <view class="cont">
            <view class="has-photo width">
              <image :src="datas.avatar"></image>
            </view>
          </view>
        </view>
       
        <view class="h20"></view>
        <view class="update-box">
          <view class="tit">
            <view class="left">店内环境照片</view>
          </view>
          <view class="cont">
            <view class="small-photo">
              <view class="box" v-for="(item, index) in datas.storeInList" :key="index">
                <image :src="item.url"></image>
              </view>
            </view>
          </view>
        </view>
       
      </view>
    </form>
    <view class="uni-padding-wrap uni-common-mt">
      <button type="parimay" @click="gotoIndex">更新修改</button>
    </view>
  </view>
</template>

<script>
import { getStoreInfo } from "@/service/storeManage/storeManage.service.js"
export default {
  data() {
    return {
      datas: null
    };
  },
  onShow:function() {
    this.getData()
  },
  methods: {
    getData () {
      getStoreInfo({}, res => {
        if (res.status == 0) {
          this.datas = res.data;
          this.datas.mobile = this.datas.mobile?this.datas.mobile:'-';
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    gotoIndex () {
      uni.navigateTo({
        url: '/pages/storeManage/index?status=' + this.datas.status
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .pop-box {
    .tit {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51,51,51,1);
      padding: 30rpx 0;
      text-align: center;
      border-bottom: 1px solid #E1E1E1;
    }
    .cont {
      padding: 26rpx 0 55rpx;
      .text3 {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(153,153,153,1);
        line-height: 35rpx;
        text-align: center;
        padding: 0 25rpx 0 20rpx;
        line-height: 1.5;
      }
      textarea {
        width: 506rpx;
        height: 330rpx;
        background: rgba(250,250,250,1);
        border-radius: 10rpx;
        margin: 19rpx auto 0;
        color: #333333;
        font-size: 26rpx;
        padding: 20rpx;
      }
    }
    .foot {
      button {
        width: 460rpx;
        height: 60rpx;
        line-height: 60rpx;
        color: #F6DA99;
        font-size: 24rpx;
        background: rgba(67,67,67,1);
        border-radius: 12rpx;
      }
      
    }
  }
  .is-Success {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 150rpx;
      height: 150rpx;
      margin-left: 15rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  .update-box {
    padding: 41rpx 31rpx;
    .tit {
      font-family: PingFang SC;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
        text {
          color: #999999;
          font-size: 24rpx;
        }
      }
      .right {
        font-size: 28rpx;
        text-decoration: underline;
        color: #FF7473;
      }
    }
    .cont {
      margin-top: 30rpx;
      .no-photo {
        border:1px dashed #E1E1E1;
        border-radius: 16rpx;
        font-family: PingFang SC;
        .text1 {
          color: #666666;
          font-size: 24rpx;
          margin-top: 30rpx;
          text-align: center;
        }
        image {
          display: block;
          width: 79rpx;
          height: 79rpx;
          margin: 35rpx auto 0;
        }
      }
      .width {
        width: 330rpx;
        height: 200rpx;
      }
      .has-photo {
        background-color: #FAFAFA;
        position: relative;
        margin-bottom: 20rpx;
        // &:nth-last-of-type(2n) {
        //   margin-left: 26rpx;
        // }
        .close {
          width: 42rpx;
          height: 42rpx;
          position: absolute;
          right: -20rpx;
          top: -20rpx;
        }
        image {
          border-radius: 16rpx;
        }
      }
      .photo-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
      .sp-photo {
        padding: 25rpx 46rpx;
        font-family: PingFang SC;
        border:1px dashed #E1E1E1;
        border-radius: 16rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image {
          width: 38rpx;
          height: 30rpx;
        }
        .text2 {
          margin-left: 45rpx;
          color: #333333;
          font-size: 26rpx;
          .text3 {
            color: #999999;
            font-size: 22rpx;
            margin-top: 15rpx;
          }
        }
      }
      .small-photo {
        display: flex;
        flex-wrap: wrap;
        .box {
          position: relative;
          width: 110rpx;
          height: 110rpx;
          background-color: #FAFAFA;
          margin-left: 20rpx;
          &:first-of-type {
            margin-left: 0;
          }
          .close {
            width: 42rpx;
            height: 42rpx;
            position: absolute;
            right: -20rpx;
            top: -20rpx;
            z-index: 1;
          }
        }
      }
    }
  }
  
  .h20 {
    height: 20rpx;
    background-color: #FAFAFA;
  }
  
  .add-address-view {
    min-height: 100vh;
    padding-bottom: 114rpx;
    background-color: #FFFFFF;
  }
  .btn_div {
    width: 100%;
    // height: 451rpx;
    background: #FFF;
  }
  
  .pick-value {
    color: #999999;
    font-size: 24rpx;
  }
  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 687rpx;
    height: 70rpx;
    background: #434343;
    font-size:30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin:21rpx auto;
  }
  .uni-common-mt{
    width: 100%;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    height: 112rpx;
    border-top:2rpx solid #E1E1E1;
  }
  .form-item {
    display: flex;
    width: 718rpx;
    // justify-content: center;
    align-items: center;
    margin-left: 32rpx;
    // height: 100rpx;
    padding: 36rpx 0;
    border-bottom: 1px solid #E1E1E1;
    
    .form-item-label {
      width: 140rpx;
      text-align: left;
      padding: 0 32rpx 0 0;
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
    }
    .form-item-input {
      font-size: 28rpx;
      height: 38rpx;
      color: #666666;
      flex: 1;
      .input-placeholder {
        color: #999999;
        font-size: 24rpx;
      }
    }
    .form-item-pick {
      flex: 1;
      padding-right: 15rpx;
    }
    .arrow {
      margin-right: 33rpx;
      border-right: 3rpx solid #8A8A8A;
      border-top: 3rpx solid #8A8A8A;
      height: 15rpx;
      width: 15rpx;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
      border-left: 2rpx solid transparent;
      border-bottom: 2rpx solid transparent;
    }
    .no-arrow {
      margin-left: 64rpx;
    }
  }
  .border-none {
    border: none;
  }
  .pick-left {
    color: #666666;
    font-size: 28rpx;
  }
</style>
